<template lang="pug">
    div(class="simple-maintenance")
      template(v-if="config")
        el-row
          el-col(:span="formVisible ? 12 : 24")
            el-card(shadow="hover")
              div(slot="header" v-if="setting && setting.mainTable") 
                strong {{setting.mainTable.title}}
              SearchBar(:fields="config.searchBar" @search-click="getData")
              ActionBar(:config="config.actionBar" @submit-success="getData" v-if="config.actionBar !== false")
              MainTable(:config="config.mainTable" ref="table" @row-click="rowClick")
          el-col(:span="formVisible ? 10 : 0" :offset="formVisible ? 2 : 0")
            transition(enter-active-class="animated fadeIn")
                template(v-if="rightPart === 'insert'")
                  el-card(class="box-card" shadow="hover" v-show="formVisible")
                    div(slot="header")
                      strong 新建  
                    CreateFrom(:config="config.createForm" @submit-success="formsubmitSuccess")
                template(v-if="rightPart === 'update'")
                  el-card(class="box-card" shadow="hover" v-show="formVisible")
                    div(slot="header")
                      strong 编辑
                    UpdateForm(:config="config.updateForm" @submit-success="formsubmitSuccess")
                template(v-if="rightPart === 'custom'")
                  div
                    slot(name="right-side" v-bind="clickedRow")
                      strong 右边
      template(v-else)
        p loading
      
</template>
<script>
import SearchBar from "./search-bar";
import ActionBar from "./action-bar";
import axios from "../../../plugins/axios";
import MainTable from "./main-table";
import CreateFrom from "./create";
import UpdateForm from "./update";
import { Message } from "element-ui";

import Vue from "vue";

import store from "./store";
import "animate.css";
import modules from "./store/modules";

export default {
  name: "default-theme",
  components: { MainTable, SearchBar, ActionBar, CreateFrom, UpdateForm },
  // store,
  data() {
    return {
      config: null,
      dialogVisible: false,

      editingId: null,

      clickedRow: null // 点击表格的行 数据记录在此
    };
  },
  props: {
    mainId: { type: String },

    json: { type: Object },

    // -----------------------
    setting: {
      type: Object,
      default: () => {
        return {
          mainTable: {
            title: null
          },
          // 是否点击行显示自定义右侧组件
          hasCustomRight: false,

          // 等于false时不显示actionBar
          actionBar: true,
          // 外部可以传入Token
          token: null,
          // 默认是api，比如原先url请求是 a/b, 开发时会是 api/a/b。 仅开发有效
          prefix_url: null,
          // 读取配置节点的地址，默认是 /maintenance/item/
          json_url: null
        };
      }
    }
    // ----------------------
  },
  computed: {
    isEdit() {
      return this.$store.state.status.isEdit;
    },

    formVisible() {
      return this.$store.state.status.formVisible;
    },

    rightPart() {
      return this.$store.state.status.rightPart;
    }
  },
  watch: {
    mainId() {
      var id = this.mainId;
      if (!id) Message.error("路径错误:参数无效");
      this.getMaintenanceItem(mainId);
    }
  },
  methods: {
    setPrimaryKey(primaryKey) {
      this.$store.dispatch("base/setPrimaryKey", primaryKey);
    },

    setMainId(maindId) {
      this.$store.dispatch("base/setMainId", maindId);
    },

    setFilter(filter) {
      this.$store.dispatch("data/setFilter", filter);
    },

    getMaintenanceItem(id) {
      let url = "/maintenance/item/";
      if (this.setting && this.setting.json_url) url = this.setting.json_url;
      url = url + id;

      const options = { url: url, method: "get" };
      axios(options).then(config => {
        this.config = config;
        this.setPrimaryKey(config.primaryKey); // 设置主键
        this.setFilter(config.searchBar);
      });
    },

    formsubmitSuccess() {
      this.$refs.table.getData();
    },

    getData() {
      this.$refs.table.getData();
    },

    rowClick(row) {
      if (!this.setting.hasCustomRight) return;

      this.clickedRow = row;
      this.$store.dispatch("status/showCustom");
      this.$emit("row-click", row);
    },
    // 异步注册vuex module
    dynamicRegist() {
      for (var key in modules) {
        var module = modules[key];
        this.$store.registerModule(key, module);
      }
    },
    // 外部setting赋值
    set_settings() {
      var setting = this.setting;
      if (!setting) return;
      if (setting.token) this.$store.dispatch("base/setToken", setting.token);
      if (setting.prefix_url !== null)
        this.$store.dispatch("base/setPrefixUrl", setting.prefix_url);
    }
  },
  created() {
    if (!this.$store) {
      this.$store = store; // 如果是嵌套在其他的VUEX项目下
    } else {
      this.dynamicRegist();
    }

    if (this.json) {
      this.config = this.json;
      this.set_settings();
      return;
    }
    this.set_settings();

    var id = this.mainId;
    if (!id) Message.error("路径错误:参数无效");
    this.setMainId(id);
    this.getMaintenanceItem(id);
  }
};
</script>